<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item style="float: right;">
            <el-input v-model="admin.username" placeholder="请输入要搜索的账户" @input="selectByPage(1)"/>
          </el-form-item>

          <el-form-item style="float: right;">
            <el-input v-model="admin.realname" placeholder="请输入要搜索的名称" @input="selectByPage(1)"/>
          </el-form-item>

          <el-form-item style="float: right;">
            <el-radio-group v-model="admin.status">
              <el-radio value=0 size="large" border @change="selectByPage(1)">禁用</el-radio>
              <el-radio value=1 size="large" border @change="selectByPage(1)">启用</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>

        <el-table :data="pageInfo.list" border>
          <el-table-column fixed prop="id" label="ID"/>
          <el-table-column prop="username" label="账户"/>
          <el-table-column prop="phone" label="电话"/>
          <el-table-column prop="email" label="邮箱"/>
          <el-table-column prop="realname" label="名称"/>
          <el-table-column prop="createTime" label="注册时间"/>
          <el-table-column label="状态">
            <template #default="scope">
              <el-switch v-if="scope.row.id==adminS.id" v-model="scope.row.status"
                         :active-value="1"
                         :inactive-value="0"
                         active-text="启用"
                         class="ml-2"
                         disabled
                         inactive-text="禁用"
                         inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
              <el-switch v-else
                         v-model="scope.row.status"
                         :active-value="1"
                         :inactive-value="0"
                         active-text="启用"
                         class="ml-2"
                         inactive-text="禁用"
                         inline-prompt
                         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                         @change="change(scope.row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center">
          <el-pagination style="margin-top: 20px;" background layout="prev, pager, next"
                         v-model:current-page="pageInfo.pageNum" :page-count="pageInfo.pages"
                         @update:current-page="selectByPage"/>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>

import adminApi from "@/api/adminApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";

//搜索条件
const admin = ref({
  username: null,
  realname: null,
  status: null,
});

const adminS = ref({
  id: null,
  username: null,
  realname: null,
  status: null,
});


//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});

//分页查询
function selectByPage(pageNum) {
  adminApi.All(admin.value, pageNum, 5)
      .then(resp => {
        pageInfo.value = resp.data;
      });
}

function change(id) {
  adminApi.update(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

function getInfo() {
  adminApi.getInfo()
      .then(resp => {
        adminS.value = resp.data
      })
}

getInfo();
selectByPage(1);
</script>

<style scoped>

</style>